<template>
  <div>
    <div class="box">
      <el-form class="gl_form_mini" label-position="right" label-width="110px">
        <el-form-item label="积分方式选择">
          <el-radio-group v-model="pointTypeCode" @change="putPointType">
            <el-radio v-for="(item, index) in pointType" :key="index" :label="item.code">{{ item.value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="赛事类型">
          <el-select v-model="gameLevel" size="mini" value-key="id" placeholder="请选择赛事类型">
            <el-option v-for="item in gameLevelList" :key="item.id" :value="item" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="width: 100%;margin: 0 auto;" align="center">
      <div class="gl_title">{{ gameLevel.name }}</div>
      <el-tabs v-model="activeName" type="border-card" style="min-height: calc(100vh - 360px);" @tab-click="handleClick">
        <el-tab-pane label="传统方式" name="first">
          <Tradition v-if="isFirst" :level-id="gameLevel.id" />
        </el-tab-pane>
        <el-tab-pane label="项目方式" name="second">
          <Project v-if="isSecond" :level-id="gameLevel.id" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Tradition from './tradition';
import Project from './project';
import { mapState, mapActions } from 'vuex';
import {
  api_GET_EventsManagementCompetitionLevel,
  api_GET_EventsManagementEventResultPointTypeCompetitionId, // 获取当前积分类型
  api_PUT_EventsManagementEventResultPointTypeCompetitionId // 设置积分类型
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'IntegralSetting',
  components: {
    Tradition,
    Project
  },
  data() {
    return {
      activeName: 'first',
      isFirst: true,
      isSecond: false,
      pointTypeCode: false,
      pointType: [],
      gameLevel: {},
      gameLevelList: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getLevelList();
    this.getDict().then(res => {
      this.pointType = res.pointType;
    });
    this.getPointType();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    getLevelList() {
      api_GET_EventsManagementCompetitionLevel().then(res => {
        this.gameLevel = res.items[0];
        this.gameLevelList = res.items;
      }, error => {
        this.$message({ type: 'error', message: error.error && error.error.message });
      });
    },
    // 获取当前积分类型
    getPointType() {
      var that = this;
      api_GET_EventsManagementEventResultPointTypeCompetitionId(this.$route.params.parentId).then(res => {
        that.pointTypeCode = res || 'Tradition';
        if (!res) {
          that.putPointType();
        }
      }).catch(error => {
        if (error.error.code === '当前赛事尚未设置比赛配置信息，请先设置配置信息') {
          that.$message({ type: 'warning', message: error.error.code });
        } else {
          that.$message({ type: 'error', message: error.error && error.error.message || '获取积分方式失败！' });
        }
      });
    },
    // 设置积分类型
    putPointType() {
      var that = this;
      const form = {
        pointTypeCode: this.pointTypeCode
      };
      api_PUT_EventsManagementEventResultPointTypeCompetitionId(this.$route.params.parentId, form).then(res => {}).catch(error => {
        that.$message({ type: 'error', message: error.error && error.error.message || '设置积分方式失败！' });
      });
    },
    handleClick(tab) {
      if (tab.name === 'first') {
        this.isFirst = true;
        this.isSecond = false;
      } else if (tab.name === 'second') {
        this.isFirst = false;
        this.isSecond = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  padding-top: 20px;
  margin-bottom: 15px;
}
.gl_title {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 30px;
  margin-top: 5px;
}
</style>
